<template>
  <div class="detail">
    <my-back></my-back>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="detail-it-top">
      <p>{{ detailObj.basicInfo?.name }}</p>
      <span>{{ detailObj.basicInfo?.characteristic }}</span>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <!-- &#x3000; 中文空格 -->
        <span>&#x3000;原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span>库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <cut-title @cut="cut"></cut-title>
    <div v-html="detailObj.content" v-show="showExplain"></div>
    <div v-show="!showExplain" style="background: #fff">
      <evaluate
        :evObj="item"
        v-for="(item, index) in evList"
        :key="index"
      ></evaluate>
    </div>
  </div>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" @click="$router.push('/cart')" text="购物车" :badge="$store.state.cartList.length"/>
    <!-- <van-action-bar-icon v-if="star == false" icon="star-o" text="未收藏" color="#ff5000" @click="star=!star"/>
    <van-action-bar-icon v-else icon="star" text="已收藏" color="#ff5000" @click="star=!star"/> -->
    <van-action-bar-icon
      :icon="star ? 'star' : 'star-o'"
      :text="star ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="star = !star"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button
      type="danger"
      text="加入购物车"
      @click="show = true"
    />
  </van-action-bar>
  <van-action-sheet v-model:show="show" title=" ">
    <div class="foot_top">
      <img :src="detailObj.basicInfo?.pic" alt="" />
      <section>
        <p>{{ detailObj.basicInfo?.name }}</p>
        <p class="foot_pic">￥{{ price }}</p>
      </section>
    </div>
    <div
      class="properties"
      v-for="(item, index) in detailObj.properties"
      :key="index"
    >
      <!-- {{index}} -->
      <h6>{{ item.name }}</h6>
      <ul>
        <li
          v-for="(n, i) in item.childsCurGoods"
          :class="{ active: checkId.some(it => it == n.id)}"
          :key="i"
          @click="checkFtn(n,index)"
        >
          {{ n.name }}
        </li>
      </ul>
    </div>
    <div class="foot_bto">
      <span>购买数量</span>
      <van-stepper v-model="num" />
    </div>
    <van-button type="danger" @click="addCart">加入购物车</van-button>
  </van-action-sheet>
</template>

<script>
import { ref, reactive, toRefs,computed } from "vue";
import { useRoute,useRouter } from "vue-router";
import { getDetail, getEvaluate, getPrice } from "../../api/second/second";
import myBack from "../../components/myBack.vue";
import CutTitle from "../../components/cutTitle.vue";
import evaluate from "../../components/evaluate.vue";
import { Notify } from 'vant';
import { useStore } from 'vuex';
export default {
  components: { myBack, CutTitle, evaluate },
  setup() {
    const store = useStore();
    const router = useRouter();
    // console.log(router);
    const route = useRoute();
    let id = route.params.id;
    const data = reactive({
      detailObj: {},
      evList: [], // 商品评价的数组
      showExplain: true,
      star: false, // 控制是否收藏的
      show: false, // 是否显示加入购物车的规格
      price: 1,
      checkId: [], // 规格的选择集合
      checkobjs:[], // 选中的规格的集合
      token: computed(() => localStorage.getItem('token'))
    });
    const num = ref(1); // 购买的数量
    num.value = data.detailObj.basicInfo?.minBuyNumber || 1;

    getDetail({ id: id }).then((res) => {
      // console.log(res);
      data.detailObj = res.data;
    });
    getEvaluate({ goodsId: id }).then((res) => {
      data.evList = res.data;
    });

    const cut = (i) => {
      data.showExplain = i == 0 ? true : false;
    };

    const checkFtn = (val,i) => { // 规格选中的函数
      //  console.log(i);
       data.checkobjs[i] = val;
       data.checkId[i] = val.id;
       getPrice({goodsId: id, propertyChildIds:data.checkId.join(',')}).then(res => {
         data.price = res.data.price;
       })
      //  let arr = [];
      //  arr[0] = 1;
      //  arr[1] = 2;
      //  arr[2] = 3;
      //  console.log(arr);
    }

    const addCart = () => { // 加入购物车的事件
      // data.detailObj.properties.length 后台返回给我们的规格的数据
      if (!data.token){ // 判断是否登录过
        router.push('/login');
        return
      }
       if(data.checkId.length == data.detailObj.properties.length){
          let obj = {
            btm: data.checkobjs[1]?data.checkobjs[1].name:null,
            btmid: data.checkId[1]?data.checkId[1]:null,
            checked: false,
            number: num.value,
            price: data.price,
            src: data.detailObj.basicInfo?.pic,
            up: data.checkobjs[0].name,
            upid: data.checkId[0],
            goodId: id,
            name: data.detailObj.basicInfo?.name
          }
          store.commit('addCart', obj);
          data.show = false;
       } else {
         Notify({ type: 'warning', message: '请选择商品规格' });
       }
    } 
    return {
      ...toRefs(data),
      cut,
      num,
      checkFtn,
      addCart
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: calc(100% - 100px);
  background: #e9e9e9;
  overflow-y: auto;
  .my-swipe {
    img {
      width: 100%;
      height: 750px;
    }
  }
  .detail-it-top {
    background: #fff;
    padding: 0 10px 10px 26px;
    overflow: hidden;
    margin-top: -20px;
    p {
      font-size: 30px;
      margin-top: 50px;
    }
    span {
      font-size: 24px;
      color: #b8b8b8;
      margin: 30px 0 34px;
    }
    section {
      display: flex;
      height: 70px;
      span:last-child {
        margin-left: auto;
      }
    }
  }
}
.foot_top {
  display: flex;
  font-size: 26px;
  align-items: center;
  border-bottom: 2px solid #ccc;
  img {
    height: 122px;
    width: 122px;
    margin: 30px;
  }
  .foot_pic {
    color: red;
    margin-top: 30px;
  }
}
.properties {
  padding: 0 20px;
  font-size: 26px;
  h6 {
    line-height: 60px;
    margin-top: 30px;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      padding: 6px 16px;
      border: 2px solid #ccc;
      border-radius: 10px;
      margin: 0 10px 20px 0;
    }
    .active {
      border-color: red;
    }
  }
}
.foot_bto {
  font-size: 26px;
  border-top: 2px solid #ccc;
  height: 140px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.van-button--danger {
  width: 100%;
}
</style>